<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <!--<script src="./node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>-->
    <script src="node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>
    <script src="node_modules/Mock/dist/mock-min.js"></script>
    <link rel="stylesheet" href="index1.css">
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
 <div id="root">
     <!--防止页面"闪烁"-->
     <ul class="user-list">
         <li class="user-item">
             <span>姓名</span>
             <span>性别</span>
             <span>年龄</span>
             <span>电话</span>
             <span>操作</span>
         </li>
         <li v-for="(item,index) in userData" class="user-item">
             <span>{{item.name}}</span>
             <span>{{item.gender|toGender}}</span>
             <span>{{item.age}}</span>
             <span>{{item.phoneNumber}}</span>
             <span v-on:click = "clickToDel(index)">删除</span>
         </li>
     </ul>
     <div v-once>{{msg}}</div>
     <div v-text="htmlTag"></div>
     <input type="text" v-model="username" >
     <div>{{username}}</div>
     <button @click = 'fn'>提交</button>
     <h1 v-if="isLogIn">请登录</h1>
     <h1 v-else="isLogIn">登录成功</h1>
     <!--给html标签的属性绑定数据 v-bind-->
     <a :href="href" :style="{background: 'red', color:'#fff' }" :class="[{test:!isActive},{[d]:isActive}]" id="">{{hrefname}}</a>
     <!--<img :src="./a.jpg" :alt="">-->
 </div>
 <script>
     Vue.filter('toGender',function(value){
         return value ? '男':'女';
     });
     let app = new Vue({
         el:'#root',
         data:{
             userData:Mock.mock({
                 'data|10':[{
                     name:'@cname',
                     gender:'@boolean',
                     city:'@city',
                     phoneNumber:/^1[345789]\d{9}$/,
                     age: '@integer(16,30)',

                 }]}).data,
             msg:'hello,world!',
             htmlTag:'<h2>123234325436</h2>',
             username:'',
             isLogIn:false,
             href:'https://www.baidu.com',
             hrefname:'baidu',
             isActive:true,
             d:'active',
         },
         methods:{
             clickToDel(index){
                 this.userData.splice(index,1);
             },
             fn(){
                 console.log(this.username);
             }
         }
     })

 </script>
</body>
<!--<script src="app.js"></script>-->
</html>
